<!-- components/LoginMobile.vue -->
<template>
  <van-cell-group class="login-container">
    <div class="header">
      <!-- <img src="@/assets/logo.png" alt="Logo" class="logo" /> -->
      <h2>欢迎回来</h2>
      <p>请输入您的凭据以继续</p>
    </div>

    <van-form @submit="slogin" :show-error="false">
      <van-field v-model="form.email" left-icon="contact" name="email" label="用户名" placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }, { min: 3, message: '用户名至少3个字符' }]" />

      <van-field v-model="form.pwd" left-icon="lock" name="pwd" label="密码" placeholder="请输入密码" type="password"
        :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少6位' }]" />

      <div class="options">
        <van-checkbox v-model:checked="rememberMe">记住我</van-checkbox>
        <div>
          <router-link to="/register" class="forgot-password">没有账号？</router-link>
          <router-link to="/forgot-password" class="forgot-password">忘记密码？</router-link>
        </div>

      </div>

      <div style="padding: 20px;">
        <van-button round block type="primary" native-type="submit">登录</van-button>
      </div>
    </van-form>

    <!-- <div class="social-login">
      <p>使用社交账号登录</p>
      <div class="social-icons">
        <van-button icon="qq" plain type="primary" size="small" />
        <van-button icon="wechat" plain type="success" size="small" />
        <van-button icon="github" plain type="default" size="small" />
      </div>
    </div> -->
  </van-cell-group>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
import { login } from '@/utils/request';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore=useUserStore();
const rememberMe = ref(false);
const form = ref({
  email: '',
  pwd: ''
});

const slogin = async(values) => {
  // console.log(values.email);
  
  // 处理登录逻辑
  const r = await login({
    username: values.email,
    pwd: values.pwd,
  });
  if(r){
    ElMessage.success('登录成功');
    userStore.setUser(r)
    console.log("eeee");
    router.push('/moviesite')
  }else{
    ElMessage.error('登录失败');

  }
};
</script>

<style scoped>
.login-container {
  margin: 40px 20px;
  border-radius: 15px;
  overflow: hidden;
}

.header {
  text-align: center;
  padding: 20px 10px 10px;
}

.logo {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

h2 {
  color: #323233;
  font-weight: 600;
  margin-bottom: 10px;
}

p {
  color: #646566;
  font-size: 14px;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 16px;
}

.forgot-password {
  background-color: inherit;
  color: #1989fa;
  font-size: 13px;
  text-decoration: none;
}

.social-login {
  margin-top: 20px;
  text-align: center;
  padding-bottom: 20px;
}

.social-icons .van-button {
  margin: 0 8px;
}
</style>